<template>
    <div>
        <WelcomePage v-if="showWelcome" @scroll-down="handleScrollDown" />
        <el-container v-else style="height:100vh">
            <el-header style="background: yellow; color: white; height: 80px; padding: 0; box-shadow: 0 2px 10px rgba(0,0,0,0.1);">
                <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px 30px;">
                    <div style="display: flex; align-items: center; gap: 25px;">
                        <div style="display: flex; align-items: center; gap: 15px;">
                            <img src="/BHFDFIHFJCGJG-TZ9TELCZmA.png" alt="Logo" style="width: 50px; height: 50px; border-radius: 50%;">
                            <span class="gradient-text" style="font-size: 28px; font-weight: 700; letter-spacing: 1px; font-family: 'Microsoft YaHei', sans-serif; text-shadow: 1px 1px 2px rgba(0,0,0,0.3);">豹饱巴士外卖</span>
                        </div>
                    </div>

                    <div style="display: flex; align-items: center; gap: 20px;">
                        <div v-if="user.id" style="display: flex; align-items: center; gap: 15px; background: rgba(255,255,255,0.2); padding: 8px 20px; border-radius: 30px;">
                            <img
                                :src="'http://localhost:8081' + user.yhtx"
                                style="width: 45px; height: 45px; border-radius: 50%; border: 2px solid white; box-shadow: 0 0 5px rgba(0,0,0,0.2);"
                                v-if="user.yhtx"
                            />
                            <div v-else class="user-avatar-placeholder"></div>
                            <span style="font-weight: 600; font-size: 16px;">{{ user.yhm || '用户' }}</span>
                        </div>

                        <el-button
                            :type="user.id ? 'danger' : 'success'"
                            @click="logout"
                            size="large"
                            round
                            style="font-weight: 600;"
                        >
                            {{ user.id ? '退出登录' : '用户登录' }}
                        </el-button>
                        <el-button @click="toJie" type="primary" size="large" round style="font-weight: 600;">切换非用户端</el-button>

                    </div>
                </div>
            </el-header>

            <el-container>

                <el-aside style="width: 250px; background: linear-gradient(to bottom, #4b6cb7, #182848); box-shadow: 3px 0 10px rgba(0,0,0,0.1);":style="{
    backgroundImage: 'url(/1682567931134289.png)',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    backgroundRepeat: 'no-repeat',

  }">
                    <el-scrollbar>
                        <el-menu  :default-openeds="['1', '2', '4']"
                                  default-active="/user/delivery1"
                                  :router="true"
                                  background-color="rgba(0, 0, 0, 0.3)"
                                  text-color="white"
                                  active-text-color="#FFD700"      style="backdrop-filter: blur(2px);">
                            <el-sub-menu index="1" >
                                <template #title>
                                    <el-icon :size="30"><House /></el-icon>
                                  <el-item >首页</el-item>

                                </template>
                                <el-menu-item index="/user/delivery1">
                                    <el-icon :size="30"><ForkSpoon /></el-icon>
                                  <el-item>外卖点餐</el-item>

                                </el-menu-item>
                            </el-sub-menu>

                            <el-sub-menu index="2">
                                <template #title>
                                    <el-icon :size="30"><List /></el-icon>
                                  <el-item>订单管理</el-item>

                                </template>
                                <el-menu-item index="/user/HistoricalOrders">
                                    <el-icon :size="30"><Tickets /></el-icon>
                                    <el-item>查看订单</el-item>

                                </el-menu-item>
                            </el-sub-menu>

                            <el-sub-menu index="4">
                                <template #title>
                                    <el-icon :size="30"><Avatar /></el-icon>
                                  <el-item>个人中心</el-item>

                                </template>
                                <el-menu-item index="/user/address">
                                    <el-icon :size="30"><Location /></el-icon>
                                  <el-item>收货地址</el-item>

                                </el-menu-item>
                                <el-menu-item index="/user/InfoEditing">
                                    <el-icon :size="30"><Iphone /></el-icon>
                                  <el-item>个人信息</el-item>

                                </el-menu-item>
                            </el-sub-menu>
                        </el-menu>
                    </el-scrollbar>
                </el-aside>

                <el-main style="background-color: #f8f9fa; padding: 20px;">
                    <!-- 路由显示区 -->
                    <router-view @user-updated="acquireUsers"/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup lang="ts">
import router from "../../router.ts";
import axios from "axios";
import {onMounted, ref} from "vue";
import WelcomePage from './WelcomePage.vue';
const showWelcome = ref(true);


const handleScrollDown = () => {
    showWelcome.value = false;
};

const user=ref({
    id:'',
    yhm:'',
    pwd:'',
    yhtx:'',
    sjh:'',
    age:'',
    sex:''
});
const acquireUsers=async ()=>{
    const {data} = await axios.get('/api/user1',{params:user.value});
    user.value=data;
}
//--------------------------页面自动刷新-----------------------
onMounted(()=>{
    acquireUsers();
})

const logout=() => {
    router.push('/login')
}
const toJie=() => {
    router.push('/multilogin')
}

</script>

<style scoped>
#photoPanel {
    padding-top: 10px;
    text-align: center;
}

#photoPanel #online {
    font-size: 20px;
    color: #5CB85C;
}

.user-avatar-placeholder {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#photoPanel {
    padding-top: 10px;
    text-align: center;
}

#photoPanel #online {
    font-size: 20px;
    color: #5CB85C;
}

/* 添加过渡动画 */
.el-header, .el-aside, .el-main {
    transition: all 0.3s ease;
}

/* 悬停效果 */
.el-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

/* 菜单项悬停效果 */
.el-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(5px);
    transition: all 0.2s ease;
}

.rainbow-text {
    background: linear-gradient(90deg, #ff0000, #ff7e00, #ffff00, #00ff00, #0000ff, #8b00ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.gradient-text {
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4, #ffeaa7, #dda0dd);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient 3s ease infinite;
    font-weight: bold;
}
</style>